<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4号机床</title>

    <script type="text/javascript" src="/js/staticResources/js/echarts.js"></script>
    <script type="text/javascript" src="/js/staticResources/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/staticResources/js/echarts.min.js"></script>
    <script type="text/javascript" src="/js/highcharts.js"></script>
    <script type="text/javascript" src="/js/staticResources/js/dark.js"></script>
    <script type="text/javascript" src="/js/staticResources/js/mqttws31.min.js"></script>

    <style>
        body {
            font-family: Arial, Sans-Serif;
            font-size: 0.85em;
            color: black;
        }
    </style>
    <style>
        #first{
            left:0%;
            top:0%;
            width: 100%;
            height:100%;
            background:white ;
            position: absolute;
        }
        #electric{
            left:2%;
            top:10%;
            width: 30%;
            height:45%;
            position: absolute;
        }
        #vibration{
            left:2%;
            top:50%;
            width: 30%;
            height: 45%;
            position: absolute;
        }
        #temperature{
            left: 35%;
            top: 10%;
            width: 30%;
            height: 45%;
            position: absolute;
        }
        #assessment
        {
            left: 35%;
            top: 55%;
            width: 30%;
            height: 45%;
            position: absolute;
        }
        #advice{
            right: 2%;
            top: 7%;
            width: 30%;
            height: 45%;
            position: absolute;
        }
        #new{
            right: 2%;
            top:50%;
            width: 30%;
            height: 45%;
            position: absolute;
        }
        #health{
            width: 100%;
            height: 17.5%;
            background-color: green;
        }
        #security{
            width: 100%;
            height: 17.5%;
            background-color: green;
        }
        #strategy{
            width: 100%;
            height: 75%;

        }
        #newStrategy{
            width: 100%;
            height: 61%;

        }
        .pagination {
            display: inline-block;
            position:absolute;
            top:20px;
            left:100px;
        }
        .pagination a {
            color: black;
            float: left;
            padding: 16px 32px;
            text-decoration: none;
        }
        .pagination a.active {
            background-color: blue;
            color: white;
        }
        .pagination a:hover:not(.active) {background-color: #ddd;}


    </style>
</head>
<body>
<div id="first">
    <div class="pagination">
        <a href="http://192.168.11.35:8061/gethtml/getMonitor1" target="_self" >A1</a>
        <a href="http://192.168.11.35:8061/gethtml/getMonitor2" target="_self" >A2</a>
        <a href="http://192.168.11.35:8061/gethtml/getMonitor3" target="_self" >A3</a>
        <a href="http://192.168.11.35:8061/gethtml/getMonitor4" target="_self" class="active">A4</a>
    </div >
    <div id="electric">
    </div>
    <div id="vibration">
    </div>
    <div id="temperature">
    </div>
    <div id="assessment">
        <input readonly="readonly" type="text" id="machineName" style="text-align: center;width: 100%;height: 12%;font-size: 20px;border: 3px solid" value="A4">
        <h1>健康状态</h1>
        <input readonly="readonly" type="text" id="health" style="text-align: center;width: 100%;height: 12%;font-size: 20px" value="健康">
        <h1>安全预警</h1>
        <input readonly="readonly" type="text" id="security" style="text-align: center;width: 100%;height: 12.5%;font-size: 20px" value="正常">
    </div>
    <div id="advice">
        <h1>历史措施</h1>
        <textarea readonly="readonly" type="text" id="strategy"  style="font-size: 20px"></textarea>
    </div>
    <div id="new">

        <form action="" METHOD="post" style="height: 100%;width: 100%;">
            <h1 display="inline" style="top: 10%">应对措施录入</h1>
            <select id="test1"  style="width: 100px;height:30px">
                <option value="1" name="缓升故障">缓升故障</option>
                <option value="2" name="急升故障">急升故障</option>
            </select>
            <textarea type="text" id="newStrategy"  style="font-size: 20px"></textarea>
            <input type="button" value="录入" style="width:15%;height: 8%;margin-top:0%;margin-left: 42%;position:absolute;" onclick="history()">
        </form>
    </div>
</div>

</body>
<script>
    option = {
        title: {
            text: '温度特征值'
        },
        tooltip: {
            trigger: 'axis',
            /*            formatter: function (params) { //修改一下，标签
                            params = params[0];
                            var date = new Date(params.name);
                            return date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
                        },*/
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            min:-0.5,
            max:0.5,
            splitLine: {
                show: false
            }
        },
        series: [{
            name: '特征值',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            //data: data,
            markLine: {   //添加警戒线
                symbol: "none",               //去掉警戒线最后面的箭头
                name: "警戒线",
                silent: true
            }
        }]
    };
    option1 =  {
        title: {
            text: '电流监控'
        },
        tooltip: {
            trigger: 'axis',
            /*            formatter: function (params) { //修改一下，标签
                            params = params[0];
                            var date = new Date(params.name);
                            return date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
                        },*/
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            min:-10,
            max:10,
            splitLine: {
                show: false
            }
        },
        series: [{
            name: '特征值',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            //data: data,
            markLine: {   //添加警戒线
                symbol: "none",               //去掉警戒线最后面的箭头
                name: "警戒线",
                silent: true
            }
        }]
    };

    option2 = {
        title: {
            text: '主轴温度'
        },
        tooltip: {
            trigger: 'axis',
            /*           formatter: function (params) { //修改一下，标签
                           params = params[0];
                           var date = new Date(params.name);
                           return date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
                       },*/
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            min:0,
            max:50,
            splitLine: {
                show: false
            }
        },
        legend: {
            data: ['实际温度', '预测温度']
        },
    };
    var myChart = echarts.init(document.getElementById('electric'));
    var myChart1 = echarts.init(document.getElementById('vibration'));
    var myChart2 = echarts.init(document.getElementById('temperature'));
    myChart.setOption(option);
    myChart1.setOption(option1);
    myChart2.setOption(option2);

    var data1 = [];
    var data2 = [];
    var data3 = [];
    var data4 = [];
    var data5 = [];
    var data6 = [];
    var now = +new Date(1997, 9, 3);
    var oneDay = 24 * 3600 * 1000;
    var clientid='machine4'+Math.random();
    client = new Paho.MQTT.Client("192.168.11.15",8083,clientid); //建立客户端实例
    client.connect({
        onSuccess: onConnect,
        userName: "admin",
        password: "public"
    }); //连接服务器并注册连接成功处理事件
    client.onConnectionLost = onConnectionLost; //注册连接断开处理事件
    client.onMessageArrived = onMessageArrived; //注册消息接收处理事件
    function onConnect(){
        console.log("已连接");
        client.subscribe("tubian3");
        client.subscribe("prev3");
        client.subscribe("warn3");
        client.subscribe("Sample/1D4F05E0C0A089C/temperature");
    }
    function onConnectionLost(responseObject) {
        if(responseObject.errorCode !== 0) {
            console.log("连接已断开");
        }
        client.connect({
            onSuccess: onConnect,
            userName: "admin",
            password: "public"
        });
    }
    function onMessageArrived(message) {
        topic = message.destinationName;
        payload = message.payloadString;
        console.log(topic);
        if (payload!="close"){
            var value = payload;
            if (topic=="prev3"){
                var strs = payload.split(","); //定义一数组
                var temperature1=strs[0];
                var temperature2=strs[1];

                data4.push(randomData(temperature1));
                data5.push(randomData(temperature2));
                myChart2.setOption({
                    series: [{
                        name:"实际温度",
                        symbolSize: 4,
                        data: data4,
                        type:'scatter'
                    },
                        {name:"预测温度",
                            symbolSize: 4,
                            data: data5,
                            type: 'scatter'
                        }]
                });
            } else if (topic=="tubian3"){
                console.log(payload);
                data3.push(randomData(payload));
                myChart.setOption({
                    series: [{
                        data: data3
                    }]
                });
            }else if (topic=="warn3"){
                strs = payload.split(",");
                document.getElementById("security").value=strs[0];
                // document.getElementById("security").style.backgroundColor="red";
                // document.getElementById("health").style.backgroundColor="red";
                $.ajax({
                    type:"get",
                    url:"/strategiesById?id="+strs[1],
                    /*                    data:JSON.stringify(str),*/
                    contentType:"application/json",
                    success:function (data) {
                        method=data.methods;
                        var ht="";
                        method.forEach(function (value1, index) {
                            ht+=index+1+"、"+value1.method+"\r\n";
                        });
                        document.getElementById("strategy").value=ht;
                        console.log("成功");
                    },
                    error:function () {
                        console.log("失败");
                    }
                })

            }else if (topic=='Sample/1D4F05E0C0A089C/temperature') {
                var json = JSON.parse(payload);

                var strs = new Array(); //定义一数组
                strs = json.data; //字符分割
                var el=strs[17].data;
                data6.push(randomData(el));
                myChart1.setOption({
                    series: [{
                        name:"特征值",
                        symbolSize: 4,
                        data: data6,
                        type:'scatter'
                    }]
                });
            }
        }
    }
    function randomData(value) {
        var mytime = new Date();
        return {
            name: mytime.toString(),
            value: [
                mytime,
                value
            ]
        };
    }
    function history() {
        var method=document.getElementById("newStrategy").value;
        var id=document.getElementById("test1").value;
        var name=document.getElementById("test1").name;
        var str={"id":id,"name":name, "methods":[{"method":method}]};
        console.log(str);
        $.ajax({
            type:"POST",
            url:"/method",
            data:JSON.stringify(str),
            contentType:"application/json",
            success:function () {
                console.log("成功");
            },
            error:function () {
                console.log("失败");
            }
        })
    }
</script>
</html>